<template>
	<view class="custom-header" :style="'padding-top:'+safeArea+'px'">
		<u-icon name="arrow-left" color="#ffffff" :size="23" @click="backStep"></u-icon>
		<text class="uni-page-head__title">{{title}}</text>
		<view class="opt">
			<u-icon name="plus" color="#ffffff" :size="23" @click="handleAdd" v-show="type === 'add'"></u-icon>
			<view v-show="isConfirm" @click="handleConfirm">确定</view>
			<view v-show="showDelete && !isProPayContract" @click="handleDel">删除</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: [String],
				required: true
			},
			isProPayContract: {
				type: [Boolean],
				default: false
			},
			type: {
				type: String
			},
			isConfirm: {
				type: Boolean,
				default: false
			},
			showDelete: {
				type: Boolean,
				default: false
			},
			returnBack: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				safeArea: 0,
			}
		},
		created() {
			uni.getSystemInfo({
				success(e) {
					uni.setStorageSync('getSystemInfo', e);
				}
			})
			this.safeArea = uni.getStorageSync('getSystemInfo').safeArea.top
		},
		methods: {
			backStep() {
				if (this.returnBack) {
					this.$emit('backStep')
				} else {
					uni.navigateBack()
				}
			},
			handleAdd() {
				this.$emit('addListItem', true)
			},
			handleConfirm() {
				this.$emit('confirm', true)
			},
			handleDel() {
				this.$emit('delete', true)
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom-header {
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgb(30, 111, 255);
		color: rgb(255, 255, 255);
		padding: 7px 16px;
		width: 100%;
		z-index: 998;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.uni-page-head__title {
			font-size: 16px;
			font-weight: 700;
			line-height: 30px;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-width: 260px;
		}

		.opt {
			min-width: 23px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>